<template>
  <div>
<!--    vue-scroll-number-->
<!--    https://rg41j.csb.app/-->
    <div class="record">
      <div v-for="(item, index) in list" :key="index" class="item border">
        <div
            v-for="(v, indexs) in 10"
            :key="indexs"
            class="item"
            :style="{ ...style(item) }"
        >
          {{ indexs }}
        </div>
      </div>
    </div>

    <div
        @click="randomNumber"
        style="
				width: 850px;
				height: 100px;
				background: #ccc;
				margin-top: 100px;
			"
    ></div>
  </div>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import gsap from "gsap"

//reactive
export default defineComponent({
  name: 'numberScrolling',//组件名称
  components: {},//组件引用
  props:['value','time'],//value：数据      time：时间
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      // 父级传入
      quantity: 9, //默认9个
      delayed: true, //从零变化
      number: '123456789', //数字
      time: 2000, //过度时间
      timing: 'ease', //过度动画速度

      num: 0,
    });

    //监听
    // watch(()=>props.digit,()=>AnimateToValue())


    // 设置文字滚动
    const setNumberTransform = ()=> {
      // 拿到数字的ref，计算元素数量 numberItems数组自身顺序有问题，需要处理成和数值保持一致
      const numberItems = this.$refs.numberItem
      numberItems.sort((a, b) => {
        // 如果value相同，按照value的降序
        if (a.attributes.myIndex.value === b.attributes.myIndex.value) {
          return b.attributes.myIndex.value - a.attributes.myIndex.value;
        }
        return a.attributes.myIndex.value - b.attributes.myIndex.value;
      });

      // 在 template 里面加上 myIndex 和 myValue 属性，是因为有次发现，显示出来的结果不准确
      // 经排查，发现是 numberItems字段里面获取的 html元素顺序不对，所以重新给他排好序
      // 注意：numberItems字段里面获取的 html元素顺序不对 是偶尔发生的现象，但是为了安全起见，还是处理下

      const numberArr = state.orderNum.filter(item => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    }

    const getRandomNumber = (min, max)=> {
      return Math.floor(Math.random() * (max - min + 1) + min)
    }

    // 处理传过来的具体值value
    const toOrderNum = (num)=> {
      num = num.toString()
      state.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
      setNumberTransform();//滚动
    };


    //页面加载 初始化
    const loadInit = ()=>{
      toOrderNum(props.value) // 处理数据 做成字符串
    }

    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

      loadInit()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
    }
  }
})


</script>

<style scoped lang='less'>
/*具体值value总量滚动数字设置*/
.box-item {
  position: relative;
  height: 100px;
  font-size: 54px;
  line-height: 41px;
  text-align: center;
  list-style: none;
  color: #2D7CFF;
  writing-mode: vertical-lr;
  text-orientation: upright;
  /*文字禁止编辑*/
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  /* overflow: hidden; */
}
/* 默认逗号设置 */
.mark-item {
  width: 10px;
  height: 100px;
  margin-right: 5px;
  line-height: 10px;
  font-size: 48px;
  position: relative;
  & > span {
    position: absolute;
    width: 100%;
    bottom: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
}
/*滚动数字设置*/
.number-item {
  width: 41px;
  height: 75px;
  background: #ccc;
  list-style: none;
  margin-right: 5px;
  background:rgba(250,250,250,1);
  border-radius:4px;
  border:1px solid rgba(221,221,221,1);
  & > span {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 100%;
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;
    & > i {
      font-style: normal;
      position: absolute;
      top: 11px;
      left: 50%;
      transform: translate(-50%,0);
      transition: transform 1s ease-in-out;
      letter-spacing: 10px;
    }
  }
}
.number-item:last-child {
  margin-right: 0;
}
</style>
